{include file="common/header"}
{include file="common/app"}
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <div class="content">
                <div class="el-user-header">
                    <div class="item active">账号管理</div>
                </div>
                <el-form ref="userInfo" label-width="160px" :model="userInfo">
                    <el-form-item label="等级：">
                       <el-tag>{{userInfo.group_title}}</el-tag>
                    </el-form-item>
                    <el-form-item label="积分：">
                        <b style="color: #E6A23C">{{userInfo.now_integral}}</b>
                    </el-form-item>
                    <el-form-item label="余额：">
                        <b style="color: #E6A23C">{{userInfo.balance}}</b>
                    </el-form-item>
                    <el-form-item label="邮箱：" prop="email">
                        <div>{{userInfo.email}}</div>
                        <el-button @click="emailDialog = true" size="small">
                            {{userInfo.email === '' ? '绑定邮箱' : '修改绑定'}}
                        </el-button>
                    </el-form-item>
                    <el-form-item label="手机：" prop="mobile">
                        <div>{{userInfo.mobile}}</div>
                        <el-button @click="mobileDialog = true" size="small">
                            {{userInfo.mobile === '' ? '绑定手机' : '修改绑定'}}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <el-dialog title="邮箱绑定" :visible.sync="emailDialog" width="400px" :close-on-click-modal="false">
        <el-form :model="emailForm" :rules="emailRules" ref="emailForm" @submit.native.prevent>
            <el-form-item prop="email">
                <el-input v-model="emailForm.email" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input style="width: 200px" v-model="emailForm.code" prefix-icon="el-icon-time" placeholder="请输入验证码"></el-input>
                <el-button style="width: 120px" @click="emailGetCode()" :disabled="emailNowInterval != 0" :loading="emailCodeLoading">
                    {{emailNowInterval == 0 ? '获取验证码' : emailNowInterval + '秒后获取'}}
                </el-button>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="bindEmail()" :loading="emailLoading">确定绑定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="手机绑定" :visible.sync="mobileDialog" width="400px" :close-on-click-modal="false">
        <el-form :model="mobileForm" :rules="mobileRules" ref="mobileForm" @submit.native.prevent>
            <el-form-item prop="mobile">
                <el-input v-model="mobileForm.mobile" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input style="width: 200px" v-model="mobileForm.code" prefix-icon="el-icon-time" placeholder="请输入验证码"></el-input>
                <el-button style="width: 120px" @click="mobileGetCode()" :disabled="mobileNowInterval != 0" :loading="mobileCodeLoading">
                    {{mobileNowInterval == 0 ? '获取验证码' : mobileNowInterval + '秒后获取'}}
                </el-button>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="bindMobile()" :loading="mobileLoading">确定绑定</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                userInfo: userInfo,
                loading: false,
                emailForm: {
                    code: '',
                    email: '',
                    salt: '',
                    rcode: '',
                },
                emailRules: {
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ],
                },
                emailNowInterval: 0,
                emailLoading: false,
                emailCodeLoading: false,
                emailDialog: false,
                mobileForm: {
                    code: '',
                    mobile: '',
                    salt: '',
                    rcode: '',
                },
                mobileRules: {
                    mobile: [
                        { required: true, message: '请输入手机', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ],
                },
                mobileNowInterval: 0,
                mobileLoading: false,
                mobileCodeLoading: false,
                mobileDialog: false,
            }
        },
        created() {
            if (JSON.stringify(userInfo) == '{}') {
                location.href = index_url('login/index');
            }
        },
        methods: {
            /**
             * 获取邮箱验证码
             */
            emailGetCode() {
                let self = this;
                if (self.emailNowInterval == 0) {
                    self.emailCodeLoading = true;
                    post('api/user/sendBindEmailCode', {email: self.emailForm.email}, function(res){
                        self.emailCodeLoading = false;
                        self.$message({ showClose: true, message: res.message, type: res.status});
                        if (res.status === 'success') {
                            self.emailNowInterval = 60;
                            self.timer        = setInterval(() => {
                                if (self.emailNowInterval > 0) {
                                    self.emailNowInterval--;
                                }
                            }, 1000);
                            self.emailForm.salt  = res.salt;
                            self.emailForm.rcode = res.code;
                        }
                    })
                }
            },
            /**
             * 获取手机验证码
             */
            mobileGetCode() {
                let self = this;
                if (self.mobileNowInterval == 0) {
                    self.mobileCodeLoading = true;
                    post('api/user/sendBindMobileCode', {mobile: self.mobileForm.mobile}, function(res){
                        self.mobileCodeLoading = false;
                        self.$message({ showClose: true, message: res.message, type: res.status});
                        if (res.status === 'success') {
                            self.mobileNowInterval = 60;
                            self.timer        = setInterval(() => {
                                if (self.mobileNowInterval > 0) {
                                    self.mobileNowInterval--;
                                }
                            }, 1000);
                            self.mobileForm.salt  = res.salt;
                            self.mobileForm.rcode = res.code;
                        }
                    })
                }
            },
            /**
             * 绑定邮箱
             */
            bindEmail() {
                let self = this;
                self.$refs.emailForm.validate((valid) => {
                    if (valid) {
                        self.bindLoading = true;
                        post('api/user/bindEmail', self.emailForm, function(res){
                            if (res.status === "success") {
                                self.emailLoading = false;
                                self.userInfo.email = self.emailForm.email;
                                self.$refs.emailForm.resetFields();
                            }
                            self.bindLoading = false;
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 绑定手机
             */
            bindMobile() {
                let self = this;
                self.$refs.mobileForm.validate((valid) => {
                    if (valid) {
                        self.bindLoading = true;
                        post('api/user/bindMobile', self.mobileForm, function(res){
                            if (res.status === "success") {
                                self.mobileLoading = false;
                                self.userInfo.mobile = self.mobileForm.mobile;
                                self.$refs.mobileForm.resetFields();
                            }
                            self.bindLoading = false;
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        });
                    } else {
                        return false;
                    }
                });
            },
        },
    });
</script>
</body>
</html>